<template>
  <view class="page">
    <!-- #ifndef MP-WEIXIN-->
    <my-navbar leftText="结算单详情" @leftClick="back"></my-navbar>
    <!-- #endif -->
    <!-- 在线支付 -->
    <view class="content" v-if="type == 1">
      <view class="flex-btw">
        <text class="prop">结算单号</text>
        <text>{{ data.order_sn }}</text>
      </view>
      <view class="flex-btw">
        <text class="prop">账期</text>
        <text>{{ data.payment_days }}</text>
      </view>
      <view class="flex-btw">
        <text class="prop">结算方式</text>
        <text>{{ data.pay_type == 1 ? "线下" : "差额" }}</text>
      </view>
      <view class="flex-btw">
        <text class="prop">原始单号</text>
        <text>{{ data.related_order_order_sn }}</text>
      </view>
      <view class="flex-btw">
        <text class="prop">单据类型</text>
        <text>{{ data.type == 1 ? "订单" : "退货单" }}</text>
      </view>
      <view class="flex-btw">
        <text class="prop">下单金额</text>
        <text style="color: #e84b4b">￥{{ data.order_money }}</text>
      </view>
      <view class="flex-btw">
        <text class="prop">配送金额</text>
        <text style="color: #e84b4b">￥{{ data.send_money }}</text>
      </view>
      <view class="flex-btw">
        <text class="prop">账单号</text>
        <text>{{ data.related_order_sn }}</text>
      </view>
      <view class="flex-btw">
        <text class="prop">账单金额</text>
        <text style="color: #e84b4b">￥{{ data.account_money }}</text>
      </view>
      <view class="flex-btw">
        <text class="prop">差异金额</text>
        <text style="color: #e84b4b">￥{{ data.diff_money }}</text>
      </view>
      <view class="flex-btw">
        <text class="prop">制单人</text>
        <text>{{ data.admin_uname }}</text>
      </view>
      <view class="flex-btw">
        <text class="prop">结算日期</text>
        <text>{{ data.createdTime }}</text>
      </view>
      <view class="flex-btw">
        <text class="prop">备注</text>
        <text>{{ data.remark }}</text>
      </view>
    </view>

    <!-- 货到付款 -->
    <view class="content" v-if="type == 2">
      <view class="title">基本信息</view>
      <view class="flex-btw">
        <text class="prop">结算单号</text>
        <text>{{ data.order_sn }}</text>
      </view>
      <view class="flex-btw">
        <text class="prop">账期</text>
        <text>{{ data.payment_days }}</text>
      </view>
      <view class="flex-btw">
        <text class="prop">付款方式</text>
        <text v-show="data.pay_type == 1">支付宝</text>
        <text v-show="data.pay_type == 2">微信</text>
        <text v-show="data.pay_type == 3">银行转账</text>
        <text v-show="data.pay_type == 4">现金</text>
      </view>
      <view class="flex-btw">
        <text class="prop">付款金额</text>
        <text style="color: #e84b4b">￥{{ data.collect_money }}</text>
      </view>
      <view class="flex-btw">
        <text class="prop">抹零金额</text>
        <text style="color: #e84b4b">￥{{ data.zero_money }}</text>
      </view>
      <view class="flex-btw">
        <text class="prop">付款人</text>
        <text>{{ data.nickname }}</text>
      </view>
      <view class="flex-btw">
        <text class="prop">结算日期</text>
        <text>{{ data.createdTime }}</text>
      </view>
      <view class="flex-btw">
        <text class="prop">备注</text>
        <text>{{ data.remark }}</text>
      </view>
      <view class="list_box">
        <view class="title">账单列表</view>
        <view
          class="list"
          v-for="(item, index) in data.settlement_list"
          :key="index"
        >
          <view class="num">账单号：{{ item.related_order_sn }}</view>
          <view class="btw">
            <text
              >应付金额：<text style="color: #e84b4b"
                >￥{{ item.receive_money }}</text
              ></text
            >
            <text
              >本次支付：<text style="color: #e84b4b"
                >￥{{ item.collect_money }}</text
              ></text
            >
          </view>
          <view class="btw">
            <text
              >已付金额：<text style="color: #e84b4b"
                >￥{{ item.received_money }}</text
              ></text
            >
            <text
              >抹零金额：<text style="color: #e84b4b"
                >￥{{ item.zero_money }}</text
              ></text
            >
          </view>
          <view class="btw">
            <text
              >未付金额：<text style="color: #e84b4b"
                >￥{{ item.uncollected_money }}</text
              ></text
            >
            <text
              >剩余未付：<text style="color: #e84b4b"
                >￥{{ item.out_money }}</text
              ></text
            >
          </view>
          <view class="note"
            ><text style="font-weight: bold"
              >备注：{{ item.remark }}</text
            ></view
          >
        </view>
      </view>
    </view>
    <view v-if="type == 2" class="export flex-center" @click="exportAction"
      >导出</view
    >
  </view>
</template>

<script>
import { $https } from "@/static/js/request.js";
export default {
  data() {
    return {
      data: {},
      type: null,
    };
  },
  onLoad(options) {
    console.log(options);
    this.type = options.type; //1：在线支付，2：货到付款
    if (options.type == 1) {
      this.getData1(options.id);
    } else if (options.type == 2) {
      this.getData2(options.id);
    }
  },
  methods: {
    getData1(id) {
      $https("GET", "settlementDetailOnline", { id: id }, (res) => {
        if (res.data.errcode == 0) {
          var list = res.data.data;
          var ms = Number(list.created_at + "000");
          var now = new Date();
          now.setTime(ms);
          var date =
            now.getFullYear() +
            "-" +
            (now.getMonth() + 1) +
            "-" +
            now.getDate() +
            " " +
            now.getHours() +
            ":" +
            now.getMinutes() +
            ":" +
            now.getSeconds();
          list.createdTime = date;
          this.data = list;
        } else {
          uni.showToast({
            title: res.data.errmsg,
            icon: "none",
          });
        }
      });
    },
    getData2(id) {
      $https("GET", "settlementDetailOffline", { id: id }, (res) => {
        if (res.data.errcode == 0) {
          var list = res.data.data;
          var ms = Number(list.created_at + "000");
          var now = new Date();
          now.setTime(ms);
          var date =
            now.getFullYear() +
            "-" +
            (now.getMonth() + 1) +
            "-" +
            now.getDate() +
            " " +
            now.getHours() +
            ":" +
            now.getMinutes() +
            ":" +
            now.getSeconds();
          list.createdTime = date;
          this.data = list;
        } else {
          uni.showToast({
            title: res.data.errmsg,
            icon: "none",
          });
        }
      });
    },
    exportAction() {
      if (this.type != 2) {
        return;
      }
      let id = this.data.id;
      var xhr = new XMLHttpRequest();
      xhr.open(
        "POST",
        getApp().globalData.rootUrl + "/partner/export_offlineSettle_info"
      );
      xhr.responseType = "blob";
      xhr.setRequestHeader("content-type", "application/json");
      xhr.setRequestHeader(
        "Authorization",
        uni.getStorageSync("copartner_token")
      );
      xhr.send(JSON.stringify({ id }));
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          const link = document.createElement("a");
          let blob = new Blob([xhr.response], {
            type: "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
          });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.download = "货到付款结算单";
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }
      };
    },
    back() {
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  .content {
    padding: 20rpx 30rpx;
    font-size: 28rpx;
    > view {
      margin-bottom: 30rpx;
      color: #9a9a9a;
      .prop {
        color: #191919;
      }
    }
    .title {
      font-size: 32rpx;
      color: #191919;
      font-weight: bold;
    }
    .list_box {
      color: #191919;
      font-size: 24rpx;
      border-top: 1px solid #eee;
      .title {
        margin-top: 30rpx;
        margin-bottom: 20rpx;
      }
      .list {
        background: #fff;
        border-radius: 20rpx;
        padding: 30rpx 40rpx;
        margin-bottom: 20rpx;
        .num {
          font-size: 28rpx;
        }
        .btw {
          text {
            display: inline-block;
            width: 50%;
          }
        }
        > view {
          margin-bottom: 30rpx;
        }
      }
    }
  }
  .export {
    background: #4fa388;
    color: #fff;
    width: 280rpx;
    padding: 20rpx;
    border-radius: 60rpx;
    position: fixed;
    bottom: 40rpx;
    left: 0;
    right: 0;
    margin: auto;
  }
}
</style>
